// 引入路由的api
import {createRouter, createWebHashHistory} from 'vue-router'

// 引入页面
const Home = () => import("../views/Home.vue")
const About = () => import("../views/About.vue")

const UserCenter = () => import("../views/user-center/Index.vue")
const UserProfile = () => import("../views/user-center/Profile.vue")
const UserSettings = () => import("../views/user-center/Settings.vue")

// 引入ElementTest 页
const ElementTest = () => import("../views/ElementTest.vue")
// 引入列表页
const ListDemo =  ()=> import("../views/ListDemo.vue")
// 引入注册页
const Register = ()=> import("../views/Register.vue")

// 引入账号列表页
const AccountList = ()=> import("../views/AccountList.vue")

// 引入Vuex
const VuexPage = () => import("../views/Vuex.vue")

const NotFound = () => import("../views/404.vue")

// 路由配置
const routeConfig = [
    {path:'/', redirect:'/home'},
    {path:'/home', name:'home', component: Home},
    {path:'/about',name:'about', component: About},
    {
        path:'/user',
        name:'userCenter',
        component: UserCenter,
        redirect:'/user/profile',
        children:[
            {
                path:'profile',
                name:'profile',
                component: UserProfile
            },
            {
                path:'settings',
                name:'settings',
                component: UserSettings
            },
        ]
    },
    // VuexPage 路由配置
    {path:'/vuex', name:'vuex', component: VuexPage},
    // ElementTest 路由配置
    {path:'/element', name:'element', component: ElementTest},
    // ListDemo 路由配置
    {path:'/list-demo', name:'listDemo', component: ListDemo},
    // 注册页
    {path:'/register', name:'register', component: Register},
    // AccountList路由
    {path:'/account-list', name:'accountList', component: AccountList},

    {
        path:'/:pathMatch(.*)*',
        name:'noufound',
        component: NotFound
    }
]

// 创建实例化路由
const router = createRouter({
    history: createWebHashHistory(),
    routes: routeConfig
})

router.beforeEach((to, from)=>{
    console.log('前置');
    console.log('to',to);
    console.log('from',from);
})


router.afterEach((to, from)=>{
    console.log('后置');
    console.log('to',to);
    console.log('from',from);
})

// 对外暴露实例化路由对象
export default router